import React from 'react'
import { Table,Icon,Modal,Popconfirm,Button,Message,Row,Col} from 'antd';
import api from '../../../api/menu';
import { jsonToTree } from "../../../utils/tools";

import PanelBox from '../../../components/PanelBox';
import RegistrationForm from '../../Form/Menu';
import './index.less'

export default class TablePage extends React.Component {
  state = {
    resData:[],
    loading: false,
    pagination:false,
    defaultExpandAllRows:true,
    isOpenCreateUser: false,
    isOpenEditUser: false,
    expandRows: [],
  };


  columns = [{
    title: '名称',
    dataIndex: 'name',
    key: 'name',
    width: '20%',
    render:(text, record, index) =>  (
      <span><Icon type={record.icon}/> {record.name}</span>
    ),
  }, {
    title: 'URL',
    dataIndex: 'href',
    key: 'href',
    width: '20%',
  }, {
    title: '排序',
    dataIndex: 'sort',
    key: 'sort',
    width:'20%'
  }, {
    title: '权限',
    dataIndex: 'permission',
    key: 'permission',
    width:'20%'
  }, {
    title: '操作',
    dataIndex: 'action',
    render: (text, record) => (
      <span>
        <a href="javascript:void(0)" onClick={this.startCreateUser.bind(this,record)} >添加下级菜单</a>
        <span className="ant-divider" />
        <a href="javascript:void(0)" onClick={this.startUpdateUser.bind(this,record)}>编辑</a>
        <span className="ant-divider" />
        <Popconfirm title="您是否要删除该菜单?" data-id={record.key} onConfirm={this.deleMenu.bind(this,record.id)} okText="是" cancelText="否">
          <a href="javascript:void(0)">删除</a>
        </Popconfirm>
      </span>
    ),
  }];
  
  componentDidMount = () =>{
    this.initData();
  }

  initData = () => {
    this.setState({ loading: true });
    
    api.get('/getMenu', {
      params: {
        results: 20,
      },
      responseType: 'json'
    }).then((data) => {
      let result = data.data;
      let expandRowss = [];
      result.forEach((element => {
        expandRowss.push(element.id);
      }));
      if (result) {
        result = jsonToTree({
          json: result,
          keepChild: false
        });
      }
      this.setState({
        loading: false,
        resData: result,
        resList:data.data,
        expandRows: expandRowss,
      });

    });
  }

  onexpand = (expanded, record) => {
    let expandRows = [...this.state.expandRows];
    if (!expanded) {
      let index = expandRows.indexOf(record.id);
      if (index > -1) {
        expandRows.splice(index,1);
        this.setState({ expandRows: expandRows })
      }
    } else{
      expandRows.push(record.id);
      this.setState({ expandRows: expandRows })
    }
  }


  startCreateUser = (record,event) =>{
    if(this.resetFields)this.resetFields();
    if(this.clearIcon)this.clearIcon();
    
    if(record.id){
      this.setState({
        isOpenCreateUser: true,
        addChidRecord:{
          parentIds:record.parentIds+record.id || '',
          parentId:record.id || '',
          parentName:record.name || '',
          isShow:'1',
        },
      });
    }else{
      this.setState({
        isOpenCreateUser: true,
        addChidRecord:'',
      });
    }
    
  }
  closeCreateUser = () =>{
    this.setState({
      isOpenCreateUser: false,
    });
    this.initData();
  }
  startUpdateUser = (record,event) =>{
    if(this.resetFields)this.resetFields();
    if(this.clearIcon)this.clearIcon();
    
    this.state.resList.forEach((element)=>{
        if(element.id == record.parentId){
          record.parentName = element.name
        }
      });
    this.setState({
      isOpenEditUser: true,
      rowRecord:record,
    });
  }
  closeUpdateUser = () =>{
    this.setState({
      isOpenEditUser: false,
    });
    this.initData();
  }
  close = () =>{
    this.setState({
      isOpenEditUser: false,
      isOpenCreateUser: false,
    });
  }
  deleMenu = (id,event) => {
    api.delete('/delMenu', {id:id}).then((data) => {
      const result= data.data;
     if(result.code == 0){
      Message.success('删除成功！');
      this.initData();
     }else{
      Message.error(result.message);
     }
    });
  }

  initChildrenParams = (params) => {
    this.resetFields = params.resetFields;
    this.clearIcon = params.clearIcon;
  }
  render() {

    return (
      <div>
        <Row style={{marginBottom:'10px'}} type="flex" justify="start">
          <Col style={{width:'auto',lineHeight:'28px'}}>
            <Button type="primary" icon="plus" onClick={this.startCreateUser}>添加新主菜单</Button>
          </Col>
        </Row>
        <PanelBox>
          <Table rowKey="id"
                 columns={this.columns} 
                 dataSource={this.state.resData}
                 loading={this.state.loading} 
                 pagination={this.state.pagination}
                 expandedRowKeys={this.state.expandRows}
                 onExpand={this.onexpand}
                 /> 
        </PanelBox>
        <Modal
          title="创建菜单"
          visible={this.state.isOpenCreateUser}
          onCancel={this.close}
          wrapClassName="vertical-center-modal"
          width="800"
          style={{height:'auto'}}
          footer={null}
        >
          <RegistrationForm addconfirmBut={this.closeCreateUser} rowRecord={this.state.addChidRecord} close={this.close} callbackParent={this.initChildrenParams}/>
        </Modal>
        <Modal
          title="修改菜单"
          visible={this.state.isOpenEditUser}
          onCancel={this.close}
          wrapClassName="vertical-center-modal"
          width="800"
          footer={null}
        >
        <RegistrationForm upconfirmBut={this.closeUpdateUser}  rowRecord={this.state.rowRecord} close={this.close} callbackParent={this.initChildrenParams} />
        </Modal>
      </div>
    );
  }
}
